<style lang="scss" scoped>
.hotspot-title-link {
  text-align: right;
  .el-link {
    color: $link-color;
  }
}
.main-row {
  justify-content: space-between;
  margin-bottom: 10px;
  h1 {
    font-size: 28px;
    font-weight: 500;
    font-family: 'PingFang SC';
  }
}
.img-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .img-box {
    width: 100%;
    height: 100%;
    transition: all ease 0.5s;
    &:hover {
      transform: scale(120%);
    }
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>

<template>
  <el-row :gutter="0" class="main-row">
    <el-col :span="12"><h1>热门航拍点</h1></el-col>
    <el-col :span="12" class="hotspot-title-link"
      ><el-link>热门航拍点集锦</el-link></el-col
    >
  </el-row>

  <!-- 渲染图片 -->
  <el-row :gutter="0" class="main-row">
    <el-col :span="3" v-for="item in img_list" key="item"
      ><div class="img-container">
        <div class="img-box">
          <img :src="item.url" alt="" />
        </div></div
    ></el-col>
  </el-row>

  <!-- 渲染地名列表 -->
  <el-row :gutter="0" class="main-row">
    <el-col :span="3" v-for="item in location" key="item">{{ item }}</el-col>
  </el-row>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import request from '../../../utils/axios';

// 拿航拍点图片列表
const location = ['澳大利亚', '美国', '冰岛', '西藏', '上海', '新疆'];
let img_list = ref([]);

onMounted(async (cb) => {
  await request({
    url: 'http://website.bluej.cn/api/carouselGroup/get',
    method: 'GET',
    params: {
      carouselGroupId: 1333,
    },
  }).then((res) => {
    img_list.value = res.data.Carousels;
  });
});
</script>
